<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="form.data.id ? '修改会员荣誉' : '新增会员荣誉'"
    ok-text="提交"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="110">
          <FormItem prop="pkRclubHonor" label="荣誉">
              <Select v-model="form.data.pkRclubHonor" :loading="honorListLoading" placeholder="请选择荣誉">
                <Option v-for="item in honorList" :value="item.pkRclubHonor" :key="item.pkRclubHonor">{{item.honorName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="会员">
              <Row>
                <Col span="12" v-if="!this.form.data.pkHonorMember">
                 <Tag type="border" closable
                   v-for="(item, index) in selectedMembers"
                   :key="index"
                   @on-close="removeFromSelect(index)">{{item.nickName}}
                 </Tag>
                </Col>
                <Col span="12" v-if="this.form.data.pkHonorMember">
                 <Tag type="border"
                   v-for="(item, index) in selectedMembers"
                   :key="index"  >{{item.nickName}}
                 </Tag>
                </Col>
                <Col span="12" v-if="!this.form.data.pkHonorMember">
                  <Button class="fr" @click="showSelectModal()">从会员选择</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="获得时间" required>
              <Row>
                <Col span="24">
                  <Row>
                    <Col span="11">
                      <FormItem prop="honorDate">
                        <DatePicker type="datetime" style="width:100%" placeholder="选择时间" v-model="form.data.honorDate"></DatePicker>
                      </FormItem>
                    </Col>
                  </Row>
                </Col>
                <Col span="12"></Col>
              </Row>
            </FormItem>
            <FormItem prop="isShow" label="是否外网显示">
              <Select v-model.number="form.data.isShow" style="width:200px">
                <Option :value="0">显示</Option>
                <Option :value="1">不显示</Option>
              </Select>
            </FormItem>
            <FormItem prop="description" label="获奖说明">
              <Input type="textarea" v-model="form.data.description" placeholder="请输入" :rows="4"></Input>
            </FormItem>
        </Form>
      </Col>
    </Row>
    <select-member-modal :form="modal" :selectedMembers="selectedMembers" @select="onSelectMember"></select-member-modal>
  </Modal>
</template>

<script>
  import { mapGetters } from 'vuex'
  import vipApi from '@/api/vip'
  import selectMemberModal from './select-member-modal'

  export default {
    name: 'update-search',
    components: {
      selectMemberModal
    },
    props: [
      'form'
    ],
    data () {
      return {
        loading: true,
        honorListLoading: false,
        isSubmiting: false,
        honorList: [],
        selectedMembers: [],
        modal: {
          visible: false,
          data: {
          }
        },
        ruleValidate: {
          pkRclubHonor: [
            { required: true, message: '请选择荣誉', trigger: 'change' }
          ],
          honorDate: [
            { required: true, type: 'date', message: '请选择获得时间', trigger: 'change' }
          ],
          isShow: [
            { required: true, type: 'number', message: '请选择是否外网显示', trigger: 'change' }
          ],
          description: [
            { required: true, message: '请填写获奖说明', trigger: 'change' },
            { max: 100, message: '获奖说明字符长度应小于100', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$refs.form.resetFields()
        } else {
          this.getMemberList()
        }
        this.selectedMembers = []
      },
      async getMemberList () {
        if (!this.form.data.pkMemberInfo) {
          return
        }
        const { body } = await vipApi.memberDetail({
          pkMemberInfo: this.form.data.pkMemberInfo
        })
        this.selectedMembers.push(body.responseData)
      },
      async submitForm () {
        this.form.data.pkRcId = this.userInfo.pkRclubInfo
        if (this.selectedMembers.length > 0) {
          if (this.form.data.pkHonorMember) {
            const { body } = await vipApi.updateHonorMember(this.form.data, this.selectedMembers)
            if (this.$apiHelper.requestSuccessed(body.responseCode)) {
              this.$Message.info('修改成功')
            } else {
              setTimeout(() => {
                this.$Modal.error({
                  title: '错误',
                  content: body.desc,
                  onOk: () => {}
                })
              }, 500)
            }
          } else {
            const { body } = await vipApi.createHonorMember(this.form.data, this.selectedMembers)
            if (this.$apiHelper.requestSuccessed(body.responseCode)) {
              this.$Message.info('修改成功')
            } else {
              setTimeout(() => {
                this.$Modal.error({
                  title: '错误',
                  content: body.desc,
                  onOk: () => {}
                })
              }, 500)
            }
          }
          this.form.visible = false
          this.$emit('submit')
        } else {
          this.$Message.error('表单验证失败，请选择人员!')
          this.form.visible = true
          this.loading = false
          setTimeout(() => {
            this.loading = true
          }, 100)
        }
      },
      onSelectMember (names) {
        this.selectedMembers = names
      },
      removeFromSelect (index) {
        this.selectedMembers.splice(index, 1)
      },
      showSelectModal () {
        this.modal.visible = true
      },
      async getHonorList () {
        this.honorListLoading = true
        const { body } = await vipApi.getHonorList({
          pkRclubId: this.userInfo.pkRclubInfo,
          currentPage: 1,
          limit: 100
        })
        const { responseData } = body
        this.honorList = responseData.content
        this.honorListLoading = false
      }
    },
    mounted () {
      this.getHonorList()
      this.getMemberList()
    }
  }
</script>
